{% extends "base.html" %}

{% block title1 %}
    active
{% endblock %}

{% block page-css %}

    <script src="/static/echarts.min.js"></script>
{#    <script src="/static/shine.js"></script>#}
{% endblock %}
{% block page-body %}
    <h1 class="page-header">数据统计
    </h1>

    <div class="panel panel-primary">
        <div class="panel-heading">基线加固总数</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6">
                    <div id="software_baseline" style="width: 600px;height:400px;"></div>

                </div>
                <div class="col-md-6">
                    <div id="swmonth" style="width: 600px;height:400px;"></div>
                </div>


            </div>
            <div class="row">
                <div class="col-md-6">
                    <div id="bsmonth" style="width: 600px;height:400px;"></div>

                </div>
                <div class="col-md-6">
                    <div id="swversion" style="width: 600px;height:400px;"></div>
                </div>


            </div>

        </div>
    </div>
{% endblock %}
{% block page-script %}
    <script type="text/javascript">
        {#$(function () {#}
        // 基于准备好的dom，初始化echarts实例

        {#var software_baseline = echarts.init(document.getElementById('software_baseline'),'vintage');#}
        var software_baseline = echarts.init(document.getElementById('software_baseline'),);

        software_baseline.setOption({
            title: {
                text: '工作量统计'
            },
            tooltip: {},
            legend: {
                data: ['加固数量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                type: 'bar',
                data: []
            }]
        });

        $.get('/data/').done(function (data) {
            // 填入数据
            data = JSON.parse(data);
            {#console.log(data.name);#}
            {#console.log(typeof data);#}
            software_baseline.setOption({
                xAxis: {
                    data: data.name
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '加固数量',
                    data: data.data
                }]
            });
        });


        var swmonth = echarts.init(document.getElementById('swmonth'));

        swmonth.setOption({
            title: {
                text: '软件加固月份统计(主机)'
            },
            tooltip: {},
            legend: {
                data: ['加固主机数量']
            },
            xAxis: {
                data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月",]
            },
            yAxis: {},
            series: [{
                type: 'bar',
                name: '加固主机数量',
                data: [{{ swmonth1 }},
                    {{ swmonth2 }},
                    {{ swmonth3 }},
                    {{ swmonth4 }},
                    {{ swmonth5 }},
                    {{ swmonth6 }},
                    {{ swmonth7 }},
                    {{ swmonth8 }},
                    {{ swmonth9 }},
                    {{ swmonth10 }},
                    {{ swmonth11 }},
                    {{ swmonth12 }},
                ]
            }]
        });

        var bsmonth = echarts.init(document.getElementById('bsmonth'));

        bsmonth.setOption({
            title: {
                text: '基线加固月份统计(主机)'
            },
            tooltip: {},
            legend: {
                data: ['加固主机数量']
            },
            xAxis: {
                data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月",]
            },
            yAxis: {},
            series: [{
                type: 'bar',
                name: '加固主机数量',
                data: [{{ bsmonth1 }},
                    {{ bsmonth2 }},
                    {{ bsmonth3 }},
                    {{ bsmonth4 }},
                    {{ bsmonth5 }},
                    {{ bsmonth6 }},
                    {{ bsmonth7 }},
                    {{ bsmonth8 }},
                    {{ bsmonth9 }},
                    {{ bsmonth10 }},
                    {{ bsmonth11 }},
                    {{ bsmonth12 }},
                ]
            }]
        });

var swversion = echarts.init(document.getElementById('swversion'));

        swversion.setOption({
            title: {
                text: '软件加固统计'
            },
            tooltip: {},
            legend: {
                data: ['软件加固数量']
            },
            xAxis: {
                data: ["openssh", "openssl", "ntp", "wget", "vsftp", "ntpdate",]
            },
            yAxis: {},
            series: [{
                type: 'bar',
                name: '软件加固数量',
                data: [{{ openssh_num }},
                    {{ openssl_num }},
                    {{ ntp_num }},
                    {{ wget_num }},
                    {{ vsftpd_num }},
                    {{ ntpdate_num }},

                ]
            }]
        });
    </script>


{% endblock %}